<template>
    <BasicModal
      v-bind="$attrs"
      ref="modal"
      @register="registerModal"
      show-footer
      :can-fullscreen="false"
      width="80%"
    >
      <template #footer>
        <a-button @click="closeModal">关闭</a-button>
      </template>
      <BasicForm @register="registerForm" @submit="handleSubmit">
        </BasicForm>
      <div ref="chartRef" id="powerChart" :style="{ height: '300px', width: '100%' }"></div>
    </BasicModal>
  </template>
  <script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref, Ref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { useECharts } from '@/hooks/web/useECharts';
  import { defHttp } from '@/utils/http/axios';
  const modal = ref<any>();
  const [registerModal, { closeModal, changeLoading }] =
  useModalInner(async (data) => {
    resetFields();
    setTimeout(() => {
        getData()
    }, 1000);
  });
  const [
    registerForm,
    { getFieldsValue, resetFields, setFieldsValue, validate },
  ] = useForm({
    showActionButtonGroup: true,
    labelWidth: 100,
    schemas: [
        {
            component: 'ApiSelect',
            label: '电站',
            field: 'stationId',
            componentProps: {
                api: '/admin/main/stationList',
                labelField: 'name',
                valueField: 'id',
                showSearch: true,
                allowClear: true,
                placeholder: '请选择电站',
            }
        },
        {
            component: 'RangePicker',
            label: '日期',
            field: '[startTime, endTime]',
            componentProps: {
                format: 'YYYY-MM-DD 00:00:00',
                placeholder: ['开始日期', '结束日期'],
            }
        }
    ],
    baseColProps: { span: 12 },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  const getData = async () => {
    getInstance()?.showLoading();
    let res = [];
    try {
        console.log(getFieldsValue())
        res = await defHttp.get({
            url: '/statistic/dayPowerStatistic',
            params: { ...getFieldsValue()}
        })
    } finally {
        getInstance()?.hideLoading();
    }
    setOptions(
        {
            xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
            data: res,
            name: '日电量统计',
            type: 'line',
            areaStyle: {}
            }
        ]
    })
  };
  const handleSubmit = async () => {
    getData()
  }
  
  
  </script>
  